<template>
  <div class="containerck">
    <div class="popupck">
        <button type="button" class="close" @click="closeCk">x</button>
        <div v-show="isShow" class="bodyck">
            <div class="seeck">付款（元）查看</div>
            <div class="moneyck">￥{{ money }}</div>
            <div class="pay">
                <div @click="gbys" class="kuang lbox meixuan" :class="{actived:!actived}" style="cursor:pointer;">余额支付
                    <!-- <img v-show="actived" class="duigou" style="height:20px;width:20px" src="../../assets/img/duigou.png" alt=""> -->
                </div>
                <div @click="gbys(),zxzf()" class="kuang rbox meixuan" :class="{actived:actived}" style="cursor:pointer;">在线支付
                    <!-- <img v-show="actived" class="duigou" style="height:20px;width:20px" src="../../assets/img/duigou.png" alt=""> -->
                </div>
            </div>
            <div class="ewm" v-if="actived">
                <div class="ewmbox lbox">
                    <div class="ewmboxm wxb rbox"><img class="ewmimg" :src="xinxi.thirdPayParams_weixin" alt=""></div>
                    <div class="zfbox right20"><img class="payicon" src="../../assets/img/wxpay.png" alt="">微信支付</div>
                </div>
                <div class="ewmbox rbox">
                    <div class="ewmboxm zfbb"><img class="ewmimg" :src="xinxi.thirdPayParams_ali" alt=""></div>
                    <div class="zfbox left20"><img class="payicon" src="../../assets/img/zfb.png" alt="">支付宝支付</div>
                </div>
            </div>
            <div class="yezf" v-if="!actived">
                <div class="qrzf pointer" @click="erqr">确认支付</div>
            </div>
        </div>
        <div v-show="!isShow" class="content">
    <div class="bbody">
        <div class="head">
            <span class="colorg"><router-link class="rlink" to="/">首页</router-link></span>
            <span class="colorg" style="margin-left: 10px;">></span>
            <span style="margin-left: 10px;">足球预测分析</span>
        </div>
        <div class="tblist">
            <div class="box1">
                <div class="box2">
                    <div class="time colorg2">{{ analyselist.matchSort }}</div>
                    <div class="timeb pd10">
                        <div class="zqd pd10"><img class="qdimg" :src="analyselist.zranksPhoto" alt=""></div>
                        <div class="zqd2">
                            <div class="fcenter pd30 font-s15">{{ analyselist.zName }}</div>
                            <!-- <div class="fcenter">2</div> -->
                        </div>
                        <div class="vs">
                            <div class="fcenter colorg3">{{ analyselist.matchRound }}轮</div>
                            <div class="fcenter pd10">VS</div>
                            <!-- <div class="fcenter">:</div> -->
                        </div>
                        <div class="yqd2">
                            <div class="fcenter pd30 font-s15">{{ analyselist.kName }}</div>
                            <!-- <div class="fcenter">1</div> -->
                        </div>
                        <div class="yqd pd10"><img class="qdimg" :src="analyselist.kranksPhoto" alt=""></div>
                    </div>
                </div>
            </div>
            <!-- <div class="jslist">
                <div class="jsfx coloro">技术分析</div>
                <div class="fxx">{{ analyselist.analysis }}</div>
            </div> -->
            <div class="jslist">
                <div class="jsfx coloro">总结</div>
                <div class="fxx">{{ analyselist.advantageEvaluate }}</div>
            </div>
        </div>
    </div>
    </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'popupck',
  props: {
      'yhid':String,
      'fxid':String,
      'money':String
  },
  data() {
      return {
          isShow:false,
          timer:null,
          data0:'',
          xinxi:'',
          yhid:'',
          ddh:'',
          actived:false,
          wxzf:1,
          zfbzf:2,
          yezf:3,
          analyselist:'',
        lianxi:''
      }
  },
  created() {
      console.log('1111111111111111111111111111111')
      console.log(JSON.parse(window.localStorage.getItem('data0')))
      console.log(this.data0)
      this.lianxi = JSON.parse(window.localStorage.getItem('lianxi'))
    this.analyselist = JSON.parse(window.localStorage.getItem('anaone'))
    console.log('就是这里')
    console.log(this.analyselist)
    if(this.analyselist == undefined) {
      console.log('测试这里')
      this.huoqu()
    }
    //   console.log('查看订单号')
    //   console.log(JSON.parse(window.localStorage.getItem('ddh')))
    //   this.yonghu = window.localStorage.getItem(JSON.parse('yonghuxinxi'));
    //   this.ddh = window.localStorage.getItem(JSON.parse('ddh'));
    //   this.yhid = this.yonghu.id
    //   console.log('用户信息')
    //   console.log(this.yhid)
    //   console.log(this.ddh)
    // console.log('查看订单号')
    // this.yhid = window.localStorage.getItem(JSON.parse('yonghuxinxi')).id
    //   console.log(JSON.parse(window.localStorage.getItem('ddh')))
    //   this.ddh = JSON.parse(window.localStorage.getItem('ddh'))
  },
  watch: {
//   $route () {
//     this.yonghu = window.localStorage.getItem(JSON.parse('yonghuxinxi'));
//       this.ddh = window.localStorage.getItem(JSON.parse('ddh'));
//       this.yhid = this.yonghu.id
//       console.log('用户信息')
//       console.log(this.yhid)
//       console.log(this.ddh)
//   }

},
mounted() {
    console.log('1111111111111111111111111111111')
      console.log(JSON.parse(window.localStorage.getItem('data0')))
      console.log(this.data0)
      this.lianxi = JSON.parse(window.localStorage.getItem('lianxi'))
    this.analyselist = JSON.parse(window.localStorage.getItem('anaone'))
    console.log('就是这里')
    console.log(this.analyselist)
    if(this.analyselist == undefined) {
      console.log('测试这里')
      this.huoqu()
    }
    // console.log('查看订单号')
    // this.yhid = window.localStorage.getItem(JSON.parse('yonghuxinxi')).id
    //   console.log(JSON.parse(window.localStorage.getItem('ddh')))
    //   this.ddh = JSON.parse(window.localStorage.getItem('ddh'))
},
beforeDestroy() { 
   clearInterval(this.timer); 
   this.timer = null;
},
  methods:{
      async huoqu() {
          this.isShow = false
      var xiangqin1 = new FormData
      xiangqin1.set('userId',this.yhid)
      xiangqin1.set('analysisId',this.fxid)
      const { data:res } = await this.$http.post('/app/zqMatchAnalysis/get', xiangqin1)
      this.analyselist = res.data
      console.log(res)
    },
    closeCk (){
      this.$emit('closeCk')
    },
    async zxzf () {
        this.ddh = JSON.parse(window.localStorage.getItem('ddh'))
        console.log('5555555555555555555555555')
        console.log(JSON.parse(window.localStorage.getItem('ddh')))
        var zxzf = new FormData()
        zxzf.set('userId',this.yhid)
        zxzf.set('orderId',this.ddh)
        zxzf.set('payType',this.wxzf)
        const { data: res } = await this.$http.post('app/zqOrder/payOrder.do',zxzf)
        console.log(res)
        this.xinxi = res.data
        if (res.code !== 0) return console.log('获取支付失败')
        console.log('获取支付成功')
        var thst = this
        this.timer = setInterval(async function(){
        var suzf = new FormData()
        suzf.set('id',thst.ddh)
        suzf.set('userId',thst.yhid)
        const { data: res1 } = await thst.$http.post('/app/zqOrder/getMallOrderById.do',suzf)
        console.log(res1)
        if (res1.code == 0) {
            clearInterval();
            console.log('支付成功')
            this.huoqu()
        //     thst.$router.push({
        //     name:'analyse',
        //     params: {
        //         yhid:thst.yhid,
        //         fxid:thst.fxid
        //     }
        // })

        }else {
            console.log('支付失败')
        }
         }, 6000);
    },
    gbys () {
        this.ddh = JSON.parse(window.localStorage.getItem('ddh'))
        console.log(this.yhid)
        console.log(this.fxid)
        this.actived = !this.actived
        console.log(this.actived)
    },
    async erqr () {
        this.ddh = JSON.parse(window.localStorage.getItem('ddh'))
        var ppck = new FormData()
        ppck.set('userId',this.yhid)
        ppck.set('orderId',this.ddh)
        ppck.set('payType',this.yezf)
        const { data: res } = await this.$http.post('app/zqOrder/payOrder.do',ppck)
        console.log(res)
        if (res.code !== 0) return console.log('获取支付失败')
        console.log('获取支付成功')
        // this.$router.push({
        //     name:'analyse',
        //     params: {
        //         yhid:this.yhid,
        //         fxid:this.fxid
        //     }
        // })
        this.huoqu()
        this.isShow = false
    }
  }

}
</script>

<style lang="less">
.actived{
    position: relative;
    border: 1px solid red !important;
}
.actived:after{
content: '';
background: url('../../assets/img/duigou.png') no-repeat bottom right;
position: absolute;
width: 45px;
height: 45px;
bottom: 0;
right: 0;
}
  .containerck {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.3);
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .popupck {
    background: #FFFFFF;
    height: 500px;
    width: 620px;
  }
  .close {
      width: 30px;
      height: 30px;
      font-size: 25px;
      color: #999999;
      background-color: #fff;
      border: 0;
      position: relative;
      left: 565px;
      top: 10px;
  }
  .bodyck {
      width: 96.3%;
      height: 100%;
      .seeck {
          text-align: center;
      }
      .moneyck {
          color: #EA2929;
          font-weight: bold;
          text-align: center;
          margin-top: 15px;
      }
      .pay {
          position: relative;
          width: 70%;
          height: 80px;
          margin: 40px auto;
          .kuang {
              position: absolute;
              height: 80px;
              width: 200px;
              line-height: 80px;
              text-align: center;
          }
      }
      .ewm {
          position: relative;
          width: 70%;
          margin: 40px auto;
          height: 280px;
          .ewmbox {
              position: absolute;
              height: 280px;
              width: 180px;
              line-height: 280px;
              text-align: center;
              .ewmboxm {
                  position: absolute;
                  top: 40px;
                  width: 140px;
                  height: 140px;
              }
              .zfbox {
                  position: absolute;
                  top: 200px;
                  width: 120px;
                  height: 40px;
                  text-align: center;
                  line-height: 40px;
              }
          }
      }
      .yezf {
          margin-top: 80px;
          width: 100%;
          height: 40px;
          .qrzf {
              margin: 0 auto;
              height: 40px;
              width: 200px;
              text-align: center;
              line-height: 40px;
              background-color: #FF3900;
              color: #fff;
          }
      }
  }

  .lbox {
      left: 0px;
  }
  .rbox {
      right: 0px;
  }
  .meixuan {
      border: 1px solid #DCDCDC;
  }
//   .meixuan:hover {
//       border: 1px solid #FF3900;
//   }
  .meixuan:visited {
      border: 1px solid #FF3900;
  }
  .xuanle {
      border: 1px solid #FF3900;
  }
  .duigou {
      position: absolute;
      right: 0px;
      bottom: 0px;
  }
  .wxb {
      border: 1px solid #09BB07;
  }
  .zfbb {
      border: 1px solid#06B4FD;
  }
  .left20 {
      left: 20px;
  }
  .right20 {
      right: 20px;
  }
  .ewmimg {
      width: 135px;
      height: 135px;
      line-height: 135px;
      margin-bottom: 10px;
  }
  .payicon {
      width: 25px;
      height: 25px;
  }

  .content {
    width: 80%;
    margin-left: 50px;
  .bbody {
      height: 50%;
      width: 100%;
      background-color: #fff;
      .head {
        height: 50px;
        padding-left: 25px;
        line-height: 50px;
        border: 1px solid #EEEEEE;
      }
      .tblist {
          margin-top: 45px;
          .box1 {
              width: 100%;
              height: 140px;
            //   background-color: pink;
              .box2 {
                width: 70%;
                height: 140px;
                // background-color: red;
                margin: 0 auto;
                .time {
                    text-align: center;
                }
                .timeb {
                    position: relative;
                    width: 90%;
                    height: 100px;
                    // background-color: #fff;
                    margin: 0 auto;
                    .zqd {
                        position: absolute;
                        width: 60px;
                        height: 60px;
                    }
                    .zqd2 {
                        position: absolute;
                        width: 100px;
                        height: 80px;
                        left: 70px;
                    }
                    .vs {
                        position: absolute;
                        width: 100px;
                        height: 80px;
                        left: 50%;
                        transform: translateX(-40px);
                        
                    }
                    .yqd {
                        position: absolute;
                        width: 60px;
                        height: 60px;
                        right: 0;
                    }
                    .yqd2 {
                        position: absolute;
                        width: 100px;
                        height: 80px;
                        right: 60px;
                    }
                }
              }
          }
          .jslist {
            width: 95%;
            margin: 20px auto;
            // background-color: pink;
            .jsfx {
                height: 40px;
                line-height: 40px;
                padding-left: 20px;
                background-color: #F6F6F6;
            }
            .fxx {
                // height: 300px;
                padding: 20px;
                border: 1px solid#F6F6F6;
            }
          }
      }
  }
  }

.qdimg {
    width: 60px;
    height: 60px;
    border-radius: 50%;
}
.fcenter {
    text-align: center;
}


.div-inline{ display:inline-block} 

#nav {
  margin-top: 20px;
  text-align: center;
  width: 100%;
  height: 50px;
  background:rgba(0,0,0,0.1);
}

.database {
  width: 100px;
  height: 50px;
  text-align:center;
  line-height: 50px;
  margin-left: 50px;
  padding-right: 20px;
  font-size: 20px;
  color: #FFFFFE;
}

.list {
  width: 70px;
  height: 50px;
  text-align:center;
  line-height: 50px;
  margin-left: 45px;
  color: #FFFFFE;
}


.fleft {
  float: left;
}

.bottom {
  position: relative;
  bottom: 0;
  color: #FFFFFF;
  height: 100px;
  width: 100%;
  background-color: #191C21;
}
.gg {
  position: absolute;
  margin-left: 25%;
  margin-top: 20px;
}
.right0 {
  margin-left: 70px;
}
.bbt {
  margin-top: 10px;
}
/* 下拉菜单 */
.dropbtn {
    border: none;
    cursor: pointer;
    background:rgba(0,0,0,0.1);
    color: #FFFFFE;
    // background-color: #E5E5E5;
}

.dropdown {
    position: relative;
    // display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropbtn {
    background-color: #3e8e41;
}
</style>